<%--
  Created by IntelliJ IDEA.
  User: 李林
  Date: 2020/4/1
  Time: 22:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--奖金福利管理--%>
<%--显示奖惩列表--%>
<%--新增奖惩列表--%>
<%--为员工添加奖惩--%>
<%--输入员工id 奖惩id--%>
<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ERP后台主页</title>
    <meta name="description" content="ERP后台主页">
    <meta name="keywords" content="ERP后台主页">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/morris/morris.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/select2/select2.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/plugins/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/pages/plugins/layui/layui.js "></script>
</head>

<body class="hold-transition skin-yellow-light sidebar-mini">

<div class="wrapper">

    <!-- 页面头部 -->
    <jsp:include page="../header.jsp"></jsp:include>
    <!-- 页面头部 /-->

    <!-- 导航侧栏 -->
    <jsp:include page="../aside.jsp"></jsp:include>
    <!-- 导航侧栏 /-->

    <!-- 内容区域 -->
    <div class="content-wrapper onjsp">

        <!-- ========================================== -->
        <section class="content-header">
            <h1>
                工资管理
                <small>Wages</small>
            </h1>
            <ol class="breadcrumb">
                <!-- <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li><a href="#">Forms</a></li>
                <li class="active">General Elements</li> -->
            </ol>
        </section>
        <section class="content">
            <div class="col-md-4">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h2 class="box-title ">奖惩列表</h2>
                    </div>
                    <div class="box-body">
                        <div id="demo"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <!-- <fieldset class="layui-elem-field layui-field-title"> -->
                        <h2 class="box-title ">新增奖惩</h2>
                        <!-- <legend></fieldset> </legend>-->
                    </div>
                    <div class="box-body">
                        <div class="layui-tab layui-tab-card" style="margin-top: 0px;">
                            <ul class="layui-tab-title">
                                <li class="layui-this">新建奖惩信息</li>
                                <li>添加员工奖金</li>
                            </ul>
                            <div class="layui-tab-content" style="height: 454px;">
                                <div class="layui-tab-item layui-show">
                                    <form class="form-horizontal" id="addwelform">
                                        <div class="form-group" style="margin: 40px 10px 40px 10px ;">
                                            <label for="inputwelDesc" class="col-sm-2 control-label">奖金名称</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="inputwelDesc" name="welDesc" placeholder="奖金名称">
                                            </div>
                                        </div>
                                        <div class="form-group" style="margin: 40px 10px 40px 10px ;">
                                            <label for="inputwelAmount" class="col-sm-2 control-label">奖金金额</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="inputwelAmount" οnkeyup="checked(this)" name="welAmount" placeholder="奖金金额">
                                            </div>
                                        </div>
                                        <div class="form-group" style="margin: 10px 10px 40px 10px ;">
                                            <label for="inputcomment" class="col-sm-2 control-label">奖金描述</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="inputcomment" name="comment" placeholder="奖金描述">
                                            </div>
                                        </div>

                                        <div class="text-center" style="margin: 10px 10px 40px 10px ;">
                                            <button type="button" class="btn btn-info " onclick="addwelfare()">添加</button>
                                        </div>
                                    </form>
                                </div>
                                <div class="layui-tab-item">
                                    <div class="row" style="margin: 40px 10px 40px 10px ;">
                                        <div class="col-md-1" style="width: 16%;"></div>
                                        <div class="col-md-2">
                                            <select id="welfare_sel" name="wagesLevel" class="form-control" style="height: 36px">
                                                <option value="1">员工ID</option>
                                                <option value="2">姓名</option>
                                            </select>
                                        </div>
                                        <div class="input-group col-md-6">
                                            <input type="text" id="uid_inp" style="height: 36px;" name="uid_inp" class="form-control search_inp" placeholder="搜索...">
                                            <span class="input-group-btn">
                                                      <button type="button" id="wages_btn" onclick="searchuser()" style="height: 36px" class="btn btn-flat"><i class="fa fa-search"></i></button>
                                                </span>
                                        </div>
                                    </div>
                                    <div id="detail_box">

                                    </div>
                                    <div id="detail_user_box" style="display:none;">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- ========================================== -->


    </div>
    <!-- 内容区域 /-->

    <!-- 底部导航 -->
    <jsp:include page="../foot.jsp"></jsp:include>
    <!-- 底部导航 /-->

</div>


<script src="${pageContext.request.contextPath}/pages/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<script src="${pageContext.request.contextPath}/pages/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/raphael/raphael-min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/morris/morris.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/knob/jquery.knob.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/daterangepicker/moment.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/daterangepicker/daterangepicker.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/fastclick/fastclick.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/iCheck/icheck.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/adminLTE/js/app.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/treeTable/jquery.treetable.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/select2/select2.full.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/ckeditor/ckeditor.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/input-mask/jquery.inputmask.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/chartjs/Chart.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/flot/jquery.flot.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/flot/jquery.flot.categories.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/pages/plugins/baiduTemplate/baiduTemplate.js"></script>
<script>
    $(document).ready(function() {
        // 选择框
        $(".select2").select2();

        // WYSIHTML5编辑器
        $(".textarea").wysihtml5({
            locale: 'zh-CN'
        });
    });

    // 设置激活菜单
    function setSidebarActive(tagUri) {
        var liObj = $("#" + tagUri);
        if (liObj.length > 0) {
            liObj.parent().parent().addClass("active");
            liObj.addClass("active");
        }
    }

    $(document).ready(function() {
        // 激活导航位置
        setSidebarActive("admin-index");
    });
</script>
</body>
</html>
<script>
    layui.use('element', function() {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    });
</script>
<script type="text/template" id="add_user_wel">
    <form class="form-horizontal" id="add_user_wel">
        <div class="form-group" style="margin: 40px 10px 40px 10px ;">
            <label for="wel_add_uid" class="col-sm-2 control-label">员工ID</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="wel_add_uid" name="uid" readonly="readonly" value="<~=uid~>">
            </div>
        </div>
        <div class="form-group" style="margin: 40px 10px 40px 10px ;">
            <label for="wel_add_name" class="col-sm-2 control-label">员工姓名</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="wel_add_name" name="name" readonly="readonly" value="<~=name~>">
            </div>
        </div>
        <div class="form-group" style="margin: 40px 10px 40px 10px ;">
            <label for="wel_add_gender" class="col-sm-2 control-label">员工性别</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="wel_add_gender" name="genderStr" readonly="readonly" value="<~=genderStr~>" >
            </div>
        </div>
        <div class="form-group" style="margin: 10px 10px 40px 10px ;">
            <label for="welfarelist" class="col-sm-2 control-label">奖金列表</label>
            <div class="col-sm-9">
                <select name="wid" class="form-control" id="welfarelist">

                </select>
            </div>
        </div>
        <div class="text-center" style="margin: 10px 10px 40px 10px ;">
            <button type="button" class="btn btn-default " onclick="cancel()">返回</button>
            <button type="button" class="btn btn-info " onclick="addweluser()">添加</button>
        </div>
    </form>
</script>

<%--<div>--%>

<%--</div>--%>
<%--新增奖惩列表--%>
<%--<div id="weladd_div">--%>
    <%--<form id="weladd_form">--%>
        <%--奖惩描述<input name="welDesc" type="text" placeholder="输入名称">--%>
        <%--奖惩金额<input name="welAmount" type="text" placeholder="输入金额">--%>
        <%--备注<input name="comment" type="text" placeholder="输入备注">--%>
        <%--<input type="button" onclick="" value="添加">--%>
    <%--</form>--%>
<%--</div>--%>
<%--为员工添加奖惩--%>
<%--输入员工id 奖惩id--%>
<%--<div>--%>
    <%--<form id="welbyuid_div">--%>
    <%--员工ID<input type="text" class="id_input" name="uid" >--%>
        <%--<select id="wel_sel" name="wid" onmouseenter="findAllWel()">--%>
            <%--<option value="0">-请选择-</option>--%>

        <%--</select>--%>
        <%--<input type="button" id="welbyuid_but" onclick="addweluser()" value="添加">--%>
    <%--</form>--%>
<%--</div>--%>


<script>
    var cancelhtml = [];
    $(function () {
        findAllWel()
    });

    function cancel() {
        // if(cancelhtml[0]!=null){
        //     $("#detail_box").html(cancelhtml[0]);
        //     cancelhtml[0] = null;
        // }else {
        //     $("#detail_box").html('');
        // }
        $("#detail_box").css('display','block');
        $("#detail_user_box").css('display','none');
    }

    function addwelfare() {
        $.post("${pageContext.request.contextPath}/admin/welfare/addwelfare.do.test",$("#addwelform").serialize(),function (data) {
            alert(data.message);
            window.location.href = '../welfare';
        })
    }

    function findAllWel() {
        $.get("${pageContext.request.contextPath}/admin/welfare/findallwel",{},function (data) {
            var list = data.resultList;
            var welfares = list["welfares"];
            var pd = [];
            for(var i = 0 ; i<welfares.length;i++){
                if (welfares[i]!=null){
                    var welfare = {};
                    welfare.wid = welfares[i].wid;
                    welfare.welDesc = welfares[i].welDesc;
                    welfare.welAmount = welfares[i].welAmount;
                    welfare.comment = welfares[i].comment;
                    pd.push(welfare);
                }
            }
            showwelfare(pd);
        })
    }

    function searchuser() {
        var flag = $("#welfare_sel").val();
        var value = $("#uid_inp").val();
        $.get("${pageContext.request.contextPath}/admin/welfare/searchuser",{flag,value},function (result) {
            var list = result.resultList;
            var users = list["users"];
            if(users==null){
                $("#detail_box").html('无数据');
                return;
            }
            if(users!=null&&users.length==1){
                var bt = baidu.template;
                var html = bt("add_user_wel",users[0]);
                $("#detail_user_box").html(html);
                $("#detail_user_box").css('display','block');
                welfareselect();
            }else {
                $("#detail_box").html('<table id="search_tab" lay-filter="demo" ></table>');
                var pd = [];
                for(var i = 0 ; i<users.length;i++){
                    if (users[i]!=null){
                        var user = {};
                        user.uid = users[i].uid;
                        user.username = users[i].username;
                        user.name = users[i].name;
                        user.genderStr = users[i].genderStr;
                        user.caozuo = '<input type="button" value="添加" lay-event="edit">';
                        pd.push(user);
                    }
                }
                showuser(pd);
            }
        })
    }

    function addweluser() {
        $.post("${pageContext.request.contextPath}/admin/welfare/addweluser.do",$("#add_user_wel").serialize(),function (data) {
            alert(data.message);
            window.location.href = '../welfare';
        })
    }

    //展示所有奖金条目
    function showwelfare(data){
        layui.use('table', function() {
            var table = layui.table;
            //展示已知数据
            table.render({
                elem: '#demo',
                page: true,
                cols: [
                    [ //标题栏
                        {
                            field: 'wid',
                            title: '奖金ID',
                            width: 80,
                            sort: true
                        }, {
                        field: 'welDesc',
                        title: '奖金描述',
                        width: 100
                    }, {
                        field: 'welAmount',
                        title: '奖金金额',
                        minWidth: 100
                    }, {
                        field: 'comment',
                        title: '奖金备注',
                        minWidth: 100
                    }
                    ]
                ],
                data: data,
                even: true
            });
        });
    }

    //查询出用户信息 进行监听
    function showuser(data) {
        layui.use('table', function(){
            var table = layui.table;
            //第一个实例
            table.on('tool(demo)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    detailCaozuo(data,2);
                }
            });
            table.render({
                elem: '#search_tab'
                // ,height: 312
                ,page: true //开启分页
                ,cellMinWidth: 70
                ,cols: [[ //表头
                    {field: 'uid', title: 'ID', sort: true, fixed: 'left'}
                    ,{field: 'username', title: '用户名'}
                    ,{field: 'name', title: '姓名'}
                    ,{field: 'genderStr', title: '性别'}
                    ,{field: 'caozuo', title: '操作'}
                ]]
                ,data:data
            });

        });
    }

    function detailCaozuo(data,sign) {
        var bt = baidu.template;
        var html = bt("add_user_wel",data);
        // var adduserwel = $("#detail_box").html();
        // cancelhtml.push(adduserwel);
        // $("#search_tab").css
        $("#detail_box").css('display','none');
        $("#detail_user_box").css('display','block');
        $("#detail_user_box").html('');
        $("#detail_user_box").html(html);
        welfareselect();
    }

    function welfareselect() {
        $.get("${pageContext.request.contextPath}/admin/welfare/findallwel",{},function (data) {
            var list = data.resultList;
            var welfares = list["welfares"];
            $("#welfarelist").append('<option value="0">--请选择--</option>');
            for (var i = 0 ; i<welfares.length ; i++){
                var option = '<option value="'+welfares[i].wid+'">'+welfares[i].welDesc+':'+welfares[i].welAmount+'</option>';
                $("#welfarelist").append(option);
            }
        });
    }
</script>